<script setup>
import { ref,reactive,onMounted } from 'vue';
import tabbar from '@/components/tab-bar.vue'
import {NavBar, CellGroup, Grid, GridItem, Icon, Button, Tag, Toast, showToast, showConfirmDialog} from 'vant';
import {useRoute,useRouter} from "vue-router";
import axios from "@/utils/axios.js"
import {useUserStore} from "@/stores/user.js";

const users = useUserStore().user
const router = useRouter();
const route = useRoute();
const userAccount = reactive({
  name: 'user',
  email: 'user@example.com',
})

// 从props接收用户数据
const props = reactive({
  userInfo: {
    username: '小鸡用户_12345',
    avatar: '',
  },
  userID:""
});

// 当前激活的按钮（用于变色效果）
const activeButton = ref(null);

// 订单功能点击
const handleOrderClick = () => {
  setTimeout(() => {
    activeButton.value = null;
    router.push('/order');
  }, 300);
};

// 收藏功能点击
const handleFavoriteClick = () => {
  setTimeout(() => {
    activeButton.value = null;
    router.push('/Collections');
  }, 300);
};

// 积分功能点击
const handlePointsClick = () => {
  setTimeout(() => {
    activeButton.value = null;
    router.push('/Points');
  }, 300);
};

// 地址功能点击
const handleAddressClick = () => {
  setTimeout(() => {
    activeButton.value = null;
    router.push('/Address');
  }, 300);
};

// 个人资料点击
const handleProfileClick = () => {
  setTimeout(() => {
    activeButton.value = null;
    router.push({
      name: 'PersonalInfo',
      params: {accountId : props.userInfo.userId}
    });
  }, 300);
};

// 账户安全点击
const handleSecurityClick = () => {
  setTimeout(() => {
    activeButton.value = null;
    router.push({
      name: 'AccountSec',
      params: {accountId : userAccount.name}
    });
  }, 300);
};

// 消息通知点击
const handleNotificationsClick = () => {
  setTimeout(() => {
    activeButton.value = null;
    router.push('/MessageNotify');
  }, 300);
};

// 点赞记录点击
const handleLikesClick = () => {
  setTimeout(() => {
    activeButton.value = null;
    router.push('/LikeHis');
  }, 300);
};

// 浏览历史点击
const handleHistoryClick = () => {
  setTimeout(() => {
    activeButton.value = null;
    router.push('/ViewHis');
  }, 300);
};

// 帮助中心点击
const handleHelpClick = () => {
  setTimeout(() => {
    activeButton.value = null;
    router.push('/HelpCenter');
  }, 300);
};

// 处理退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '安全提醒', {
    confirmButtonText: '退出',
    cancelButtonText: '取消',
    type: 'warning',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        // 1. 清除本地 token/session
        // 2. 跳转到登录页
        // 3. 让后端的token 失效
        router.replace('/')
        ElMessage.success('您已安全退出系统');
        sessionStorage.clear();
        axios.get(`/api/user/deleteNowUser/4`)
      }
      done(); // 必须调用done关闭弹窗
    }
  })
};

const us = JSON.parse(sessionStorage.getItem("user"));

const init = () => {
  axios.get(`api/users/getUsers/${us.userId}`)
      .then(res => {
        props.userInfo = res.data
      })
}

// 钩子函数用来获取用户基本信息
onMounted(() => {
  init()
})
</script>

<template>
  <div class="user-center">

    <div class="user-header">
      <div class="avatar-container">
        <el-image
            :src="props.userInfo.avatar"
            class="avatar-image"
            fit="cover"
        />
      </div>
      <div class="username">{{ props.userInfo.username }}</div>
    </div>

    <div class="function-grid">
      <van-grid :column-num="4" :border="false">
        <van-grid-item @click="handleOrderClick">
          <template #icon>
            <van-icon
                name="description"
                size="24"
                :color="activeButton === '我的订单' ? '#ff976a' : '#ff976a'"
            />
          </template>
          <template #text>
            <span :style="{ color: activeButton === '我的订单' ? '#ff976a' : '#333' }">我的订单</span>
          </template>
        </van-grid-item>

        <van-grid-item @click="handleFavoriteClick">
          <template #icon>
            <van-icon
                name="star-o"
                size="24"
                :color="activeButton === '我的收藏' ? '#ff976a' : '#ff976a'"
            />
          </template>
          <template #text>
            <span :style="{ color: activeButton === '我的收藏' ? '#ff976a' : '#333' }">我的收藏</span>
          </template>
        </van-grid-item>

        <van-grid-item @click="handlePointsClick">
          <template #icon>
            <van-icon
                name="gold-coin-o"
                size="24"
                :color="activeButton === '我的积分' ? '#ff976a' : '#ff976a'"
            />
          </template>
          <template #text>
            <span :style="{ color: activeButton === '我的积分' ? '#ff976a' : '#333' }">我的积分</span>
          </template>
        </van-grid-item>

        <van-grid-item @click="handleAddressClick">
          <template #icon>
            <van-icon
                name="location-o"
                size="24"
                :color="activeButton === '我的地址' ? '#ff976a' : '#ff976a'"
            />
          </template>
          <template #text>
            <span :style="{ color: activeButton === '我的地址' ? '#ff976a' : '#333' }">我的地址</span>
          </template>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="menu-list">
      <van-cell-group>
        <van-cell
            title="个人资料"
            is-link
            @click="handleProfileClick"
            :class="['menu-item', { 'active-cell': activeButton === '个人资料' }]"
        >
          <template #icon>
            <van-icon
                name="user-o"
                style="margin-right: 8px;"
                :color="activeButton === '个人资料' ? '#ff976a' : ''"
            />
          </template>
        </van-cell>

        <van-cell
            title="账户安全"
            is-link
            @click="handleSecurityClick"
            :class="['menu-item', { 'active-cell': activeButton === '账户安全' }]"
        >
          <template #icon>
            <van-icon
                name="shield-o"
                style="margin-right: 8px;"
                :color="activeButton === '账户安全' ? '#ff976a' : ''"
            />
          </template>
        </van-cell>

        <van-cell
            title="消息通知"
            is-link
            @click="handleNotificationsClick"
            :class="['menu-item', { 'active-cell': activeButton === '消息通知' }]"
        >
          <template #icon>
            <van-icon
                name="comment-o"
                style="margin-right: 8px;"
                :color="activeButton === '消息通知' ? '#ff976a' : ''"
            />
          </template>
        </van-cell>

        <van-cell
            title="点赞记录"
            is-link
            @click="handleLikesClick"
            :class="['menu-item', { 'active-cell': activeButton === '点赞记录' }]"
        >
          <template #icon>
            <van-icon
                name="like-o"
                style="margin-right: 8px;"
                :color="activeButton === '点赞记录' ? '#ff976a' : ''"
            />
          </template>
        </van-cell>

        <van-cell
            title="浏览历史"
            is-link
            @click="handleHistoryClick"
            :class="['menu-item', { 'active-cell': activeButton === '浏览历史' }]"
        >
          <template #icon>
            <van-icon
                name="clock-o"
                style="margin-right: 8px;"
                :color="activeButton === '浏览历史' ? '#ff976a' : ''"
            />
          </template>
        </van-cell>

        <van-cell
            title="帮助中心"
            is-link
            @click="handleHelpClick"
            :class="['menu-item', { 'active-cell': activeButton === '帮助中心' }]"
        >
          <template #icon>
            <van-icon
                name="question-o"
                style="margin-right: 8px;"
                :color="activeButton === '帮助中心' ? '#极ff976a' : ''"
            />
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <van-button class="logout-btn" block @click="handleLogout">退出登录</van-button>
  </div>
  <tabbar/>
</template>

<style scoped>
/* 圆角按钮样式 */
.round-button-messagebox .el-message-box__btns button {
  border-radius: 20px;
  padding: 8px 20px;
}

/* 自定义确认按钮样式 */
.custom-confirm-button {
  background-color: #ff2442 !important;
  border-color: #ff2442 !important;
  color: white !important;
}

.custom-confirm-button:hover {
  background-color: #e0203e !important;
  border-color: #e0203e !important;
}

/* 自定义取消按钮样式 */
.custom-cancel-button {
  background-color: #969799 !important;
  border-color: #969799 !important;
  color: white !important;
}

.custom-cancel-button:hover {
  background-color: #858789 !important;
  border-color: #858789 !important;
}

/* 自定义消息提示样式 */
.custom-message .el-message__content {
  font-weight: bold;
}
.avatar-container {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin-right: 16px;
  overflow: hidden;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #ff976a;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  font-weight: bold;
  border: 3px solid #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.user-center {
  padding-bottom: 80px;
  background-color: #f7f7f7;
  min-height: 100vh;
}

.user-header {
  background-color: #fff;
  padding: 30px 20px 20px;
  text-align: center;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.avatar {

}

.username {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0;
  color: #333;
}

.member-tag {
  background-color: #ff976a;
  color: white;
  border: none;
  border-radius: 15px;
  padding: 4px 15px;
  font-size: 12px;
  display: inline-block;
}

.function-grid {
  margin: 15px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.menu-list {
  margin: 15px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.logout-btn {
  margin: 30px 15px;
  background: #ff976a;
  color: white;
  border: none;
  border-radius: 8px;
  height: 44px;
  font-size: 16px;
  transition: all 0.3s;
}

.logout-btn:active {
  background: #f86c3a;
  transform: scale(0.98);
}

/* 功能项点击效果 */
.function-item {
  transition: all 0.2s;
}

.function-item:active {
  background-color: #fff6f2;
  transform: scale(0.95);
}

/* 菜单项激活状态 */
.active-cell :deep(.van-cell__title) {
  color: #ff976a;
  transition: color 0.3s;
}

:deep(.van-grid-item__content) {
  padding: 15px 8px;
  transition: all 0.2s;
}

:deep(.van-grid-item__icon) {
  font-size: 24px;
  transition: color 0.3s;
}

:deep(.van-grid-item__text) {
  font-size: 12px;
  margin-top: 8px;
  transition: color 0.3s;
}

:deep(.van-cell) {
  padding: 15px 16px;
  transition: all 0.2s;
}

:deep(.van-cell__title) {
  font-size: 15px;
  transition: color 0.3s;
}

:deep(.van-cell:active) {
  background-color: #fff6f2;
}

:deep(.van-grid-item__content:active) {
  background-color: #fff6f2;
}
</style>